<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>性能监控</title>
<%@ include file="/WEB-INF/view/common/include.jsp"%>
<link href="${ctx}/resources/style/main.css" rel="stylesheet">
<script src="${ctx}/resources/pluginJs/hightcharts-4.1.5/highcharts.js"></script>
<script src="${ctx}/resources/pluginJs/hightcharts-4.1.5/themes/grid-light.js"></script>
<script
	src="${ctx}/resources/pluginJs/hightcharts-4.1.5/highcharts-more.js"></script>
<script type="text/javascript"
	src="${ctx}/resources/pluginJs/jquery-easyui-1.4.1/easyui-patch.js"></script>
<script type="text/javascript"
	src="${ctx}/resources/pluginJs/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/pluginJs/jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/pluginJs/jquery-easyui-1.4.1/themes/color.css">
<link href="${ctx}/resources/pluginJs/zTree/css/ztree.css"
	rel="stylesheet">
<style type="text/css">
.ztree LI SPAN.button {
	filter: none;
}

.tab_custom {
	bolder-right: 1px solid #95B8E7 !important;
}
</style>
<script type="text/javascript">
var downloadUrl = "${sessionScope.FILE_DOWNLOAD_URL}";
</script>
</head>
<body class="easyui-layout">
	<!-- ------------------ -->
	<div id="main_center" region="center" split="false" bolder="false">
		<div id="aa" class="easyui-layout" data-options="fit : true,bolder : true" style="margin-top:5px; margin-left:4px;padding-left: 4px;padding-right: 5px;padding-bottom: 5px;">
			<div data-options="region:'north',split:true" title="性能监控" style="height:100%;padding:10px;">
				<!-- 二层 -->
				<div class="easyui-layout" data-options="fit : false,bolder : true" style="margin-top:5px; margin-left:4px;padding-left: 4px;padding-right: 5px;padding-bottom: 5px;">
					<c:forEach items="${groups}" var="groupb"  varStatus="groupstatus">
						<!-- 面板1 -->
						<div class="easyui-panel" style="width:98%;padding:1px;"
								data-options="title:'${groupb.groupName}',collapsible:true,closable:true">
							<div id="_performanceMEM${groupb.groupName}" val="${groupb.groupName}" class="performancestorageMEM"
							style="width: 47%; margin-left: 17px; float: left; height: 240px; position: relative; z-index: 1"></div>

							<div id="_performanceCPU${groupb.groupName}" val="${groupb.groupName}" class="performancestorageCPU"
							style="width: 47%; margin-left: 17px; float: left; height: 240px; position: relative; z-index: 1"></div>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
	<!-- ------------------ -->
	<script type="text/javascript">

			function createPerformanceMEMChart(obj,data){
			 new Highcharts.Chart({
		        chart: {
		            renderTo: obj,
		            type: 'line'
		        },
		        title: {
		            text: "",
		            style: {
		                fontSize:'13px'
		            }
		        },
		        xAxis: {
		            type:'datetime',
		            dateTimeLabelFormats: {
		                day: '%e of %b'
		            },
		            minPadding: 0.05,
		            maxPadding: 0.05
		        },
		        yAxis: {
		        	title : {
						text : 'MEM使用率(%)'
					}
		        },
		    	credits : {
					href : 'javascript:void(0)',
					text : ''
				},
		        tooltip: {  // 表示为 鼠标放在报表图中数据点上显示的数据信息
		            formatter: function() {
		                  return '<b>'+'日期:' +'</b>'
						+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br/>'
						 + this.series.name + '</b>'+ ': ' + this.y + '%';
		            }
		        },
		        series:data
		    });
			};

			 function createPerformanceCPUChart(obj,data){
				 new Highcharts.Chart({
			        chart: {
			            renderTo: obj,
			            type: 'line'
			        },
			        title: {
			            text: "",
			            style: {
			                fontSize:'13px'
			            }
			        },
			    	credits : {
						href : 'javascript:void(0)',
						text : ''
					},
			        xAxis: {
			            type:'datetime',
			            dateTimeLabelFormats: {
			                day: '%e of %b'
			            },
			            minPadding: 0.05,
			            maxPadding: 0.05
			        },
			        yAxis: {
			        	title : {
							text : 'CPU使用率 (%)'
						}
			        },
			        tooltip: {  // 表示为 鼠标放在报表图中数据点上显示的数据信息
			            formatter: function() {
			                  return '<b>'+'日期:' +'</b>'
							+Highcharts.dateFormat('%Y-%m-%d %H:%M', this.x) +'<br/>'
							 + this.series.name + '</b>'+ ': ' + this.y + '%';
			            }
			        },
			        series:data
			    });

			};

		    $(".performancestorageMEM").each(function(){
		    	var toRender = $(this);
		        $.post('${ctx}/monitor/getPerformanceMemLine',{groupName:$(this).attr("val")},function(data){
		        	createPerformanceMEMChart(toRender[0],data);
		        });
		    });
		    $(".performancestorageCPU").each(function(){
		    	var toRender = $(this);
		        $.post('${ctx}/monitor/getPerformanceCpuLine',{groupName:$(this).attr("val")},function(data){
		        	createPerformanceCPUChart(toRender[0],data);
		        });
		    });


</script>
</body>
</html>
